import React, { useEffect, useState } from 'react'
import { useDispatch, useHistory } from 'umi'
import { getExamSubject, getNoone, getExamType, getExamText, delQuestionsType } from '@/services/index'
import { Radio, Select, Button, Tag, Divider } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import './_layout.less'


const QuestionType: React.FC = () => {
  // constructor
  const { Option } = Select;
  const history = useHistory();
  const [getClass, setClass] = useState<any[]>([])
  const [getSub, setSub] = useState<any[]>([])
  const [getExam, setExam] = useState<any[]>([])
  const [getText, setText] = useState<any[]>([])

  useEffect(() => {
    getExamText().then(res => {
      // console.log(res.data)
      setText(res.data)
    })
  }, [])
  const id = { data: 'and' }


  // 通过useDispatch拿到派发redux的dispatch
  // const dispatch = useDispatch();

  function handleChange(value: any) {
    // console.log(`selected ${value}`);
  }

  useEffect(() => {
    getExamSubject().then(res => {
      setClass(res.data);
    })
  }, [])

  useEffect(() => {
    getExamType().then(res => {
      setSub(res.data);
    })
  }, [])


  useEffect(() => {
    getNoone().then(res => {
      setExam(res.data);
    })
  }, [])

  function onChange(e: any) {
    // console.log(`radio checked:${e.target.value}`);
  }

  function goDetail(item: any) {
    console.log(item)
    // console.log(1);
    history.push({ pathname: '/main/questionDetail', state: { data: item } })
  }

  function Delete(item: any) {
    console.log(item)
    //删除
    delQuestionsType({ questions_type_id: item.questions_type_id }).then(res => {
      // debugger
      console.log(res)
    })
  }

  return (
    <div className='toubu'>
      <div>

      </div>
      {/* <h1>查看试卷</h1> */}
      <dl>
        <dt>
          课程类型:
      </dt>
        <dd>
          <>
            <Radio.Group onChange={onChange} defaultValue="a">
              {
                getClass.map((item, index) => {
                  return <Radio.Button value={index} key={index}>{item.subject_text}</Radio.Button>
                })
              }
            </Radio.Group>
          </>
        </dd>
      </dl>
      <dl>
        <dt>考试类型:</dt>
        <dd>
          <>
            <Select defaultValue="" style={{ width: 200 }} onChange={handleChange}>
              {
                getSub.map((item, index) => {
                  return <Option value={item.exam_name} key={index}>{item.exam_name}</Option>
                })
              }
            </Select>
          </>
        </dd>
        <dt>题目类型:</dt>
        <dd>
          <>
            <Select defaultValue="" style={{ width: 200 }} onChange={handleChange}>
              {
                getExam.map((item, index) => {
                  return <Option value={item.questions_type_text} key={index}>{item.questions_type_text}</Option>
                })
              }
            </Select>
          </>
        </dd>
        <dt></dt>
        <dd>
          <>
            <Button type="primary" icon={<SearchOutlined />}>
              搜索
          </Button>
          </>
        </dd>
      </dl>
      {
        getText.map((item: any, index: any) => {
          return <div key={index} id='textone'>
            <div onClick={() => { goDetail(item) }}>

              <p>
                {item.title}
              </p>
              <p>
                <Tag color="#2db7f5">{item.questions_type_text}</Tag>
                <Tag color="#2db7f5">{item.subject_text}</Tag>
                <Tag color="#f50">{item.exam_name}</Tag>
              </p>
              <p style={{ color: '#2db7f5' }}>
                {item.user_name}发布
            </p>
            </div>
            <span className='bian'>
              编辑
              <p onClick={() => { Delete(item) }}>删除</p>
            </span>
          </div>
        })
      }
    </div>

  );
}

export default QuestionType;
